<head>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css">
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css">
  <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAAFWOFv7QvN2YwdsRHGb4NxRyC4jk79ebQDaMtDMgP8Of_gh6DRSFDnW-DKhNWw9bYw1333B18LVx2g" charset="utf-8">
  </script>
  <script type="text/javascript" charset="utf-8">
  google.load('yui', '2.6.0');
  google.load("maps", "2");
  google.load("search", "1");
  google.load("jquery", "1");
  // Call this function when the page has been loaded
  function init() {
        // Create Yahoo Utility Loader 
	    var loader = new YAHOO.util.YUILoader({
	    require: ["button", "connection", "event", "json","dom"],
	    base: "http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/",
	    onSuccess: function() {
	    var oPushButton = new YAHOO.widget.Button({ 
	                      label:"Add",
	                      type:"push",
	                      id:"pushbutton1",
	                      container:"pushbutton"});
	  	YAHOO.util.Event.addListener("pushbutton1", "click", getMyJson);
		var oSubmitButton = new YAHOO.widget.Button({
			label:"Submit",
			type:"submit",
			id:"submitbutton1",
			container:"submitbutton"});
//		YAHOO.util.Event.addListener("submitbutton1", "click", doSubmit);
	      },
	    timeout: 1000,
	    combine: true
    });
    	// Load Yahoo components
    	loader.insert();
    	// Load Google API components    	
	    //var searchControl = new google.search.SearchControl();
	    //  searchControl.addSearcher(new google.search.WebSearch());
	    //  searchControl.addSearcher(new google.search.NewsSearch());
	    //  searchControl.draw(document.getElementById("searchcontrol"));
  }
  google.setOnLoadCallback(init);
  </script>
</head>
<!-- Start Page Body -->
<body class="yui-skin-sam">

	<h1>Cook County Facilities</h1>
		<span id="pushbutton"></span>
		<br><br>
		<div id="container"></div>
    <div id="map" style="width: 500px; height: 300px"></div>
<!--        <div id="searchcontrol" style="float:right"></div>  -->
		<form id="submitButtonForm" name="buttonForm" method="post" action="/postdata" style="clear:both">
		<label for="user">User: </label><input type="text" id="user" name="user" value=""><br>
        <label for="content">Content: </label><input type="text" id="contents" name="content" value="">
		<span id="submitbutton"></span>
		</form>

		

<script>
var div = document.getElementById('container');
var handleSuccess = function(o){
	if(o.responseText !== undefined){
		div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
		div.innerHTML += "<li>HTTP status: " + o.status + "</li>";		
		div.innerHTML += "<li>Server response: " + o.responseText + "</li>"
	}
}
var handleFailure = function(o){
	if(o.responseText !== undefined){
		div.innerHTML = "<ul><li>Transaction id: " + o.tId + "</li>";
		div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
		div.innerHTML += "<li>Status code message: " + o.statusText + "</li></ul>";
	}
}
var callback =
{
  success:handleSuccess,
  failure:handleFailure,
};
var sUrl = "/sign";
function makeRequest(){
	var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
}
function loadMap()
{
	var map;
	var geoXml;
	if (GBrowserIsCompatible())
	{
		map = new GMap2(document.getElementById('map'));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		geoXml = new GGeoXml('http://localhost:9999/getxml');
		map.addOverlay(geoXml);
		map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    GDownloadUrl("/getxml", function(data, responseCode) {
      var xml = GXml.parse(data);
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
        map.addOverlay(new GMarker(point));
  }
})}};
</script>
	<a href="http://jquery.com/">jQuery</a>
<div id="demo">
    <input type="button" id="demo_btn" value="Get Messages">

    <div id="demo_msg"></div>
</div>
<script type="text/javascript">
function getMyJson() {
    // Get the div element in which to report messages from the server
    var msg_section = YAHOO.util.Dom.get('demo_msg');
    msg_section.innerHTML = '';

    // Define the callbacks for the asyncRequest
    var callbacks = {

        success : function (o) {
            YAHOO.log("RAW JSON DATA: " + o.responseText);

            // Process the JSON data returned from the server
            var messages = [];
            try {
                messages = YAHOO.lang.JSON.parse(o.responseText);
            }
            catch (x) {
                alert("JSON Parse failed!");
                return;
            }

YAHOO.log("PARSED DATA: " + YAHOO.lang.dump(messages));

            // The returned data was parsed into an array of objects.
            // Add a P element for each received message
            for (var i = 0, len = messages.length; i < len; ++i) {
                var m = messages[i];
                var p = document.createElement('p');
                var message_text = document.createTextNode(
                        m.animal + ' says "' + m.message + '"');
                p.appendChild(message_text);
                msg_section.appendChild(p);
            }
        },


        failure : function (o) {
            if (!YAHOO.util.Connect.isCallInProgress(o)) {
                alert("Async call failed!");
            }
        },

        timeout : 3000
    }

    // Make the call to the server for JSON data
    YAHOO.util.Connect.asyncRequest('GET',"/getjson", callbacks);
};
</script>
  <script>
  $(document).ready(function(){
    $("#container").load("/sign")
  });
  </script>
  <style>img{ height: 100px; float: left; }</style>
</head>

  <div id="images"></div>

</body>